<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        html,body,app{
            width: 100%;
            height: 100%;
            overflow: hidden;
        }
        .test{
            width: 200px;
            height: 200px;
            /*background: pink;*/

            position: absolute;
            left: 0;
            right: 0;
            top: 0;
            bottom: 0;
            margin: auto;

            /*不是所有的css属性都可以动画的*/
            /*transition: 5s all;*/
            background:green;
        }


        /*隐藏 -> 显示*/
        .damu-enter{
            opacity: 0;
            background:red;
        }
        .damu-enter-active{
            transition: 10s all
        }
        .damu-enter-to{
            opacity: 1;
            background:green;
        }

        /*显示 -> 隐藏*/
        /*.damu-leave{
            opacity: 1;
            background:green;
        }*/
        .damu-leave-active{
            transition: 10s all
        }
        .damu-leave-to{
            opacity: 0;
            background:red;
        }

    </style>
</head>
<body>
    <div id="app">
        <transition name="damu">
            <div class="test" v-show="flag"></div>
        </transition>
        <button @click="flag= !flag">click</button>
    </div>
</body>
<script src="./js/vue.js"></script>
<script>
    Vue.config.productionTip = false;

    //Vue 在插入、更新或者移除 DOM 时，提供多种不同方式的应用过渡效果
    //在vue中 过渡动画会和 v-show v-if 结合使用

    //vue中过渡动画的使用 说白了就是给满足条件的一些节点添加class
    //满足的条件: 1.包含在<transition></transition> 2.得用上css过渡

    //离开状态:  当元素从显示变为隐藏时 称为离开状态
    //进入状态:  当元素从隐藏变为显示时 称为进入状态

    //.damu-leave这个api是一个假的api 只是为了好看
    new Vue({
        el:"#app",
        data:{
           flag:false
        }
    })
</script>
</html>